<template>
	<view>
		<!-- 轮播图区域 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<!-- 循环渲染轮播图的 item 项 -->
			<swiper-item v-for="(item, i) in swiperList" :key="i">
				<navigator class="swiper-item">
					<!-- 动态绑定图片的 src 属性 -->
					<image :src="item"></image>
				</navigator>
			</swiper-item>
		</swiper>
		<!--商品详细信息内容-->
		<uni-group mode="card" top=10>
			<view class="uni-Shoppingxq" v-for="(item, i) in Userxx" :key="i">
				<!-- 价格 -->
				<text class="uni-xx-1">{{ item.price }}</text>
				<!-- 至诚校园见面交易 -->
				<text class="uni-xx-2">至诚校园见面交易</text>
				<!-- 喜欢度 -->
				<view class="uni-second-right-Live_xx">
					<!-- <image class="uni-second-right-Live1_xx" src="http://124.222.72.174:8008/images/二手转卖展示页-Sh_resale/喜欢.png" mode="">
					</image> -->
					<uni-icons  class="uni-second-right-Live1_xx" custom-prefix="custom-icon" type="heart" size="30"></uni-icons>
					<text class="uni-second-right-Live2_xx">{{ item.like_value }}</text>
				</view>
				<!-- 咚咚跑腿校园专送 -->
				<image class="uni-xx-3" src="http://124.222.72.174:8008/images/二手转卖展示页-Sh_resale/打勾.png" mode=""></image>
				<text class="uni-xx-4">咚咚跑腿校园专送</text>
				<!-- 商品详细信息内容 -->
				<text class="uni-xx-5">{{ item.detail }}</text>
				<!-- 发布于至诚校园 -->
				<text class="uni-xx-6">发布于至诚校园</text>
				<!-- 浏览次数 -->
				<text class="uni-xx-7">{{ item.watch_value }}次浏览</text>
			</view>
		</uni-group>
		<!-- 其他商品 -->
		<text style="font-size: 25px;font-family: 微软雅黑;font-weight:bold;margin-left: 10px;">其他商品</text>
		<uni-group mode="card" top=20>
			<view style="position:relative;height:540rpx;width:320rpx;padding-left: 6rpx; " v-for="(item,i) in ShopxzList" :key="i">
				<view style="position: absolute;">
					<view class="uni-second-left-s">
						<!-- 商品图片-->
						<image class="uni-second-left-ShopImg" :src="item.data1.img1"
							@click="ShopToxq(item.data1.r_xz,item.data1)"></image>
						<!-- 商品名称-->
						<text
							class="uni-second-left-ShopName">{{ item.data1.detail.length>18?item.data1.detail.substr(0,19)+"...":item.data1.detail }}</text>
						<!-- 用户头像-->
						<image class="uni-second-left-UserImg" :src="item.data1.userImg"></image>
						<!-- 用户名称-->
						<text class="uni-second-left-UserName">{{ item.data1.userName }}</text>
						<!-- 喜欢度-->
						<view class="uni-second-left-Live">
							<image class="uni-second-left-Live1" src="http://124.222.72.174:8008/images/二手转卖展示页-Sh_resale/爱心.png"
								mode="">
							</image>
							<text class="uni-second-left-Live2">{{ item.data1.like_value }}</text>
						</view>
					</view>
					<view class="uni-second-right-s">
						<!-- 商品图片-->
						<image class="uni-second-right-ShopImg" :src="item.data2.img1"
							@click="ShopToxq(item.data2.r_xz,item.data2)"></image>
						<!-- 商品名称-->
						<text class="uni-second-right-ShopName">{{ item.data2.detail }}</text>
						<!-- 用户头像-->
						<image class="uni-second-right-UserImg" :src="item.data2.userImg"></image>
						<!-- 用户名称-->
						<text class="uni-second-right-UserName">{{ item.data2.userName }}</text>
						<!-- 喜欢度-->
						<view class="uni-second-right-Live">
							<image class="uni-second-right-Live1" src="http://124.222.72.174:8008/images/二手转卖展示页-Sh_resale/爱心.png"
								mode="">
							</image>
							<text class="uni-second-right-Live2">{{ item.data2.like_value }}</text>
						</view>
					</view>
				</view>
			</view>
		</uni-group>
		<view style="padding:5px 0px 20px 0px;">
			<uni-load-more color="#007AFF" :status="status" iconType="auto" />
		</view>
		<view style="height: 50px;">
		
		</view>
		<!-- 底部 -->
		<view class="tabbar-container">
			<block>
				<view class="tabbar-item">
					<button class="uniBt_but1" @click="onWxint(wx)">复制微信</button>
					<button class="uniBt_but2" @click="onIphoneint(iphone)">电话询问</button>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//轮播图数据
				swiperList: [],
				//单商品信息数据
				Userxx: [],
				//临时存储其他商品对象
				Lslist:[],
				//转换成可识别对象集
				ShopxzList:[],
				//编号
				on: "",
				//上拉状态
				status:'more',
				//微信 手机号信息
				wx:'',
				iphone:'',
				pageNum:1,
			};
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.on = option.on;
			console.log(option);
			console.log(option.on); //打印出上个页面传递的参数。
			//this.getSwiperList()
			this.getXZList()
			const that = this;
			uni.getStorage({
				key:'xx',
				success:function(res) {
					that.Userxx.push(res.data)
					that.on=res.data.r_xz
					that.wx=res.data.userWx
					that.iphone=res.data.userIphone
					that.swiperList.push(res.data.img1)
					that.swiperList.push(res.data.img2)
					that.swiperList.push(res.data.img3)
				}
			})
		},
		methods: {
			async getXZList() {
				// 3.1 发起请求
				const {
					data: res
				} = await uni.$http.post('/api/project/selectXZImages', {
					"a": uni.$getRSAcode('page=' + this.pageNum)
				})
				var Decrpt = uni.$getRSADecrypt(res.data)
				console.log("解密数据" + Decrpt)
				this.Lslist = JSON.parse(Decrpt)
				let temp = {}
				this.Lslist.forEach((item, index, arr) => {
					if (index % 2 == 0) {
						temp['data1'] = item
					} else if (index % 2 == 1) {
						temp['data2'] = item
						this.ShopxzList.push(temp)
						temp = {}
					}
				})
			},
			ShopToxq(no,item) {
				uni.setStorage({
					key:'xx',
					data:item,
					success:function(){
						console.log("向下级发送："+item)
					}
				})
				uni.navigateTo({
					url: '/pages/second_hand/details/details?on=' + no
				})
				
			},
			onWxint(wx) {
				uni.showModal({
					title: '提示:谨防骗子',
					content: '微信号:' + wx,
					cancelText: "取消复制",
					confirmText: "确定复制",
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.setClipboardData({
								data: wx,
								success: function() {
									console.log('success');
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			onIphoneint(iphone) {
				const res = uni.getSystemInfoSync();
				// ios系统默认有个模态框
				if (res.platform == 'ios') {
					uni.makePhoneCall({
						phoneNumber: iphone,

						success() {
							console.log('拨打成功了');
						},
						fail() {
							console.log('拨打失败了');
						}
					})
				} else {
					//安卓手机手动设置一个showActionSheet
					uni.showActionSheet({
						itemList: [iphone, '呼叫'],
						success: function(res) {
							console.log(res);
							if (res.tapIndex == 1) {
								uni.makePhoneCall({
									phoneNumber: iphone,
								})
							}
						}
					})
				}

			},
			async getmo() {
				// 3.1 发起请求
				const {
					data: res
				} = await uni.$http.post('/api/project/selectXZImages', {
					"a": uni.$getRSAcode('page=' + this.pageNum)
				})
				if(res.status===101){
					this.status = 'noMore'
				}else if(res.status===400){
					 return uni.$showMsg()
				}else if(res.status===410){
					return uni.$showMsg()
				}else if(res.status===200){
					var Decrpt = uni.$getRSADecrypt(res.data)
					console.log("解密数据" + Decrpt)
					this.Lslist = JSON.parse(Decrpt)
					let temp = {}
					this.Lslist.forEach((item, index, arr) => {
						if (index % 2 == 0) {
							temp['data1'] = item
						} else if (index % 2 == 1) {
							temp['data2'] = item
							this.ShopxzList.push(temp)
							temp = {}
						}
					})
					this.status = 'more'
				}
			},
			onPullDownRefresh() {
				console.log("上拉啦")
			},
			onReachBottom() {
				console.log("触底啦")
				this.status = 'loading'
				const that = this;
				setTimeout(function() {
					that.pageNum++,
						that.getmo()
				}, 1000);
			},
		}
	}
</script>

<style lang="scss">
	//轮播图
	swiper {
		height: 600rpx;

		.swiper-item,
		image {
			width: 100%;
			height: 100%;
		}
	}

	//商品详情样式
	.uni-Shoppingxq {
		position: relative;
		left: 0px;
		top: 0px;
		width: 357px;
		height: 194px;
		background-image: none;
		border: none;
		border-radius: 0px;
		box-shadow: none;
	}

	//喜欢度
	.uni-second-right-Live_xx {
		position: absolute;
		left: 510rpx;
		top: 8rpx;
		width: 140rpx;
		height: 60rpx;
		display: flex;
		font-size: 13px;
		color: #C1C0C0;

	}

	.uni-second-right-Live1_xx {
		width: 60rpx;
		height: 60rpx;
		padding-right: 3px;
	}

	.uni-second-right-Live2_xx {
		font-size: 16px;
		padding-top: 4px;
		color: black;
	}

	//价格
	.uni-xx-1 {
		position: absolute;
		left: 0px;
		top: 10rpx;
		width: 18rpx;
		height: 80rpx;
		display: flex;
		font-family: '微软雅黑';
		font-weight: 400;
		font-style: normal;
		font-size: 22px;
	}

	//至诚校园见面交易
	.uni-xx-2 {
		position: absolute;
		left: 400rpx;
		top: 95rpx;
		width: 260rpx;
		height: 32rpx;
		display: flex;
		color: #A8A5A5;
		font-size: 14px;
	}

	.uni-xx-3 {
		position: absolute;
		left: 8rpx;
		top: 90rpx;
		width: 40rpx;
		height: 40rpx;
		display: flex;
	}

	.uni-xx-4 {
		border-width: 0px;
		position: absolute;
		left: 60rpx;
		top: 90rpx;
		width: 260rpx;
		height: 40rpx;
		display: flex;
		color: #1ABC9C;
	}

	.uni-xx-5 {
		border-width: 0px;
		position: absolute;
		left: 11px;
		top: 86px;
		width: 300px;
		height: 68px;
		display: flex;
	}

	.uni-xx-6 {
		position: absolute;
		left: 30rpx;
		top: 336rpx;
		width: 240rpx;
		height: 32rpx;
		display: flex;
		color: #1ABC9C;
	}

	.uni-xx-7 {
		position: absolute;
		left: 490rpx;
		top: 336rpx;
		width: 200px;
		height: 32rpx;
		display: flex;
		color: rgba(221, 218, 218, 0.858823529411765);
	}

	//底部自定义
	view {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	.tabbar-container {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120rpx;
		box-shadow: 0 0 5px #999;
		display: flex;
		align-items: center;
		padding: 5rpx 0;
		color: #999999;
		background-color: #FFFFFF;
	}

	.tabbar-container .tabbar-item {
		width: 33.33%;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.tabbar-container .item-active {
		color: #f00;
	}

	.tabbar-container .center-item {
		display: block;
		position: relative;
	}

	.tabbar-container .tabbar-item .item-top {
		width: 70rpx;
		height: 70rpx;
		padding: 10rpx;
	}

	.tabbar-container .center-item .item-top {
		flex-shrink: 0;
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		top: -50rpx;
		left: calc(50% - 50rpx);
		border-radius: 50%;
		box-shadow: 0 0 5px #999;
		background-color: #ffffff;
	}

	.tabbar-container .tabbar-item .item-top image {
		width: 100%;
		height: 100%;
	}

	.tabbar-container .tabbar-item .item-bottom {
		font-size: 28rpx;
		width: 100%;
	}

	.tabbar-container .center-item .item-bottom {
		position: absolute;
		bottom: 5rpx;
		padding-bottom: 8px;
	}

	//按钮r
	.uniBt_but1 {
		border-width: 0px;
		position: absolute;
		left: 35rpx;
		top: 15rpx;
		width: 330rpx;
		height: 70rpx;
		background: inherit;
		background-color: rgba(81, 211, 211, 1);
		border: none;
		border-radius: 14px;
		color: #FFFFFF;
		font-size: 13px;
	}

	.uniBt_but2 {
		border-width: 0px;
		position: absolute;
		left: 385rpx;
		top: 15rpx;
		width: 330rpx;
		height: 70rpx;
		background: inherit;
		background-color: rgba(217, 0, 27, 0.682352941176471);
		border: none;
		border-radius: 14px;
		color: #FFFFFF;
		font-size: 13px;
	}
	//左侧商品样式
	.uni-second-left-s {
		position: absolute;
		left: -12rpx;
		top: 0px;
		width: 320rpx;
		height: 530rpx;
	}
	
	//右侧商品样式
	.uni-second-right-s {
		position: absolute;
		left: 332rpx;
		top: 0px;
		width: 320rpx;
		height: 530rpx;
	}
	
	//左右侧品图片样式
	.uni-second-left-ShopImg {
		position: absolute;
		width: 320rpx;
		height: 340rpx;
		left: 0px;
		top: 0px;
		border-radius: 15px;
	
	}
	
	.uni-second-right-ShopImg {
		position: absolute;
		width: 320rpx;
		height: 340rpx;
		left: 0px;
		top: 0px;
		border-radius: 15px;
	}
	
	//商品名称样式
	.uni-second-left-ShopName {
		position: absolute;
		width: 300rpx;
		height: 74rpx;
		left: 10rpx;
		top: 350rpx;
		visibility: inherit;
		font-size: 14px;
	}
	
	.uni-second-right-ShopName {
		position: absolute;
		width: 300rpx;
		height: 74rpx;
		left: 10rpx;
		top: 350rpx;
		visibility: inherit;
		font-size: 14px;
	}
	
	//头像样式
	.uni-second-left-UserImg {
		position: absolute;
		left: 10rpx;
		top: 440rpx;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		border-radius: 100px;
	}
	
	.uni-second-right-UserImg {
		position: absolute;
		left: 10rpx;
		top: 440rpx;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		border-radius: 100px;
	}
	
	//用户昵称
	.uni-second-left-UserName {
		position: absolute;
		left: 80rpx;
		top: 450rpx;
		width: 160rpx;
		height: 60rpx;
		display: flex;
		font-size: 12px;
	}
	
	.uni-second-right-UserName {
		position: absolute;
		left: 80rpx;
		top: 450rpx;
		width: 160rpx;
		height: 60rpx;
		display: flex;
		font-size: 12px;
	}
	
	//图片框
	.uni-second-left-Live {
		position: absolute;
		left: 240rpx;
		top: 450rpx;
		width: 80rpx;
		height: 60rpx;
		display: flex;
		font-size: 10px;
		color: #C1C0C0;
	}
	
	.uni-second-right-Live {
		position: absolute;
		left: 240rpx;
		top: 450rpx;
		width: 80rpx;
		height: 60rpx;
		display: flex;
		font-size: 10px;
		color: #C1C0C0;
	
	}
	
	//哎想样式
	.uni-second-left-Live1 {
		width: 40rpx;
		height: 32rpx;
		padding-right: 3px;
	}
	
	.uni-second-right-Live1 {
		width: 40rpx;
		height: 32rpx;
		padding-right: 3px;
	}
</style>
